<template>
  <div class="commentTask">
    <div class="commentRelease">
      <textarea placeholder-class="phcolor" :placeholder="placeholderText" v-model="commmentText" auto-focus />
    </div>
    <div class="commentButton">
      <div class="cancelButton" @click.stop.prevent="operateCommmentAbolish">取消</div>
      <div class="submitButton" @click.stop.prevent="operateCommmentPublish">发表评论</div>
    </div>
  </div>
</template>

<script>
import {
  releaseCommmentContent 
} from '@/config/api'
import {showMessager} from '@/config/wUtils'
import {remidnUserSocketBadge} from '@/config/vuexUtils'
export default {
  data () {
    return {
      // 提示 文字
      placeholderText: '',
      // 评论 文本
      commmentText: '',
      // 评论 数据包
      commentPacket: {},
      // 评论 状态  0 -- 评论   1 -- 回复  2 -- 点评
      commentStatus: 0
    }
  },
  
  // mounted () {
  //   let self = this
  //   // 初始化 评论作业 界面
  //   self.initCommentTask();
  // },
  methods: {
    // 初始化 评论作业 界面
    initCommentTask() {
      let self = this;
      // 评论 文本
      self.commmentText = ''
      if(self.$root.$mp.query.commentPacket){
        // 评论 数据包
        self.commentPacket = JSON.parse(self.$root.$mp.query.commentPacket)
        if (JSON.stringify(self.commentPacket) !== '{}') {
          // 评论 状态  0 -- 评论   1 -- 回复  2 -- 点评
          self.commentStatus = self.commentPacket.comment_status
          // 提示 文字
          self.placeholderText = self.commentPacket.release_text
        }
        console.log(self.commentPacket, '评论 数据包')
      }
    },

    // 操作评论 --- 发布
    operateCommmentPublish () {
      let self = this;
      // 评论 文本
      if (self.commmentText) {
        // 评论 状态  0 -- 评论   1 -- 回复  2 -- 点评
        if (self.commentStatus === 0 || self.commentStatus === 1) {
          // 发布 评论 -- 内容
          self.publishCommmentContent ()
        }
        // if (self.commentStatus === 2) {
        //   // 发布 评论 -- 点评
        //   self.publishOpinion ()
        // }
      }else{
        // 评论 状态  0 -- 评论   1 -- 回复  2 -- 点评
        if (self.commentStatus === 1) {
          showMessager('请填写回复内容')
        }else{
          showMessager('请填写评论内容')
        }
      }
    },

    // 发布评论 --- 内容
    async publishCommmentContent () {
      let self = this;
      console.log('发布评论 --- 内容')
      wx.showNavigationBarLoading()
      let commmentInfo = await releaseCommmentContent(self.commentPacket.job_id, self.commentPacket.to_uid, self.commentPacket.from_id, self.commmentText)
      if (commmentInfo.status === 200) {
        // 评论成功
        wx.setStorageSync("comment_success", 1);
        remidnUserSocketBadge(self.commentPacket.peer_id)
        // 返回上一页
        wx.navigateBack({
          delta: 1
        })
      }else{
        showMessager(commmentInfo.msg)
      }
      console.log(commmentInfo, '....评论内容')
      wx.hideNavigationBarLoading()
    },

    // 操作评论 --- 取消
    operateCommmentAbolish () {
      let self = this;
      // 返回上一页
      wx.navigateBack({
        delta: 1
      })
    }

  },
  // 页面展示
  onShow () {
    let self = this;
    console.log('页面展示')
    // 初始化 评论作业 界面
    self.initCommentTask();
  },  
}
</script>

<style>
page{
    width: 100%;
    height: 100%;
}
</style>
<style lang="less" scoped>
.commentTask{
  width: 100%;
  height: 110%;
  background: #ffffff;
  .commentRelease{
    padding: 25rpx 10rpx;
    border: 1rpx solid #eaeaea;
    margin: 10rpx 20rpx;
    border-radius: 5rpx;
    textarea {
      width: 100%;
      height: 360rpx;
      font-family: PingFangSC-Regular;
      font-size: 30rpx;
      letter-spacing: 0.61rpx;
    }
  }
  .commentButton{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 98rpx;
    font-size: 0;
    > div {
        line-height: 98rpx;
        height: 100%;
        display: inline-block;
        font-family: PingFangSC-Regular;
        font-size: 36rpx;
        color: #ffffff;
        letter-spacing: 2rpx;
        text-align: center;
        &.cancelButton {
            width: 32%;
            background: #bdbdbd;
        }
        &.submitButton {
            width: 68%;
            background-image: linear-gradient(
                -90deg,
                #ffb497 0%,
                #fe7a72 100%
            );
        }
    }
  }
}
</style>
